// app/profile/page.tsx
'use client'

import Image from "next/image"
import Link from "next/link"
import { ResponsiveLayout } from "@/components/layout/responsive-layout"
import { ClipboardList, MessageSquare, Heart, Wallet } from 'lucide-react'
import { useShopping } from '../contexts/ShoppingContext' // 调整导入路径

export default function ProfilePage() {
  const { purchases } = useShopping()

  // 将购买记录按购买日期排序（最近的在前）
  const sortedPurchases = [...purchases].sort((a, b) => new Date(b.purchaseDate).getTime() - new Date(a.purchaseDate).getTime())

  const menuItems = [
    {
      icon: <ClipboardList className="h-6 w-6" />,
      label: "我的订单",
      href: "/orders"
    },
    {
      icon: <MessageSquare className="h-6 w-6" />,
      label: "我的评价",
      href: "/reviews"
    },
    {
      icon: <Heart className="h-6 w-6" />,
      label: "收藏店铺",
      href: "/favorites"
    },
    {
      icon: <Wallet className="h-6 w-6" />,
      label: "我的钱包",
      href: "/wallet"
    }
  ]

  return (
    <ResponsiveLayout>
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Profile Banner */}
        <div className="relative h-40 sm:h-60 w-full overflow-hidden rounded-xl mb-6 shadow-md">
          <Image
            src="/images/背景.jpg"
            alt="Profile Banner"
            width={1000}
            height={240}
            className="h-full w-full object-cover transition-transform duration-300 hover:scale-105"
          />
          <div className="absolute bottom-4 left-4 flex items-center gap-3">
            <Image
              src="/images/头像.jpg"
              alt="Profile Picture"
              width={60}
              height={60}
              className="rounded-full border-2 border-white shadow-md transition-transform duration-300 hover:scale-110"
            />
            <span className="text-lg font-medium text-white drop-shadow-md">爱购手的研究</span>
          </div>
        </div>

        {/* Menu Icons */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
          {menuItems.map((item) => (
            <Link
              key={item.label}
              href={item.href}
              className="flex flex-col items-center gap-2 p-4 rounded-lg bg-white shadow-sm hover:bg-amber-50 transition-all duration-300 hover:shadow-md"
            >
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-100 transition-transform duration-300 hover:scale-110">
                {item.icon}
              </div>
              <span className="text-sm font-medium text-amber-800">{item.label}</span>
            </Link>
          ))}
        </div>

        {/* Recent Purchases */}
        <div>
          <h2 className="text-xl font-bold mb-4 text-amber-800">近期购买</h2>
          {sortedPurchases.length === 0 ? (
            <p className="text-gray-600">您还没有购买任何商品。</p>
          ) : (
            <div className="space-y-4">
              {sortedPurchases.map((item, index) => (
                <div key={index} className="flex items-center gap-4 rounded-lg border p-4 bg-white shadow-sm transition-all duration-300 hover:shadow-md hover:scale-[1.02]">
                  <Image
                    src={item.image}
                    alt={item.name}
                    width={80}
                    height={80}
                    className="rounded-lg transition-transform duration-300 hover:scale-110"
                  />
                  <div className="flex-1">
                    <h3 className="font-medium text-amber-800">{item.name}</h3>
                    <p className="text-sm text-gray-500">¥{item.price}</p>
                  </div>
                  <span className={`text-sm font-medium ${item.status === "已发货" ? "text-green-600" : "text-amber-600"
                    }`}>
                    {item.status}
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </ResponsiveLayout>
  )
}
